<template>
  <div class="performance-card-wrap">
      <performance-card v-for="item in performanceList"
      :title="item.title" :count="item.count"
      :compareCount="item.compareCount" :compare="item.compare"
      :icon="item.icon" :key=item.id>
      </performance-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import performanceCard from './performanceCard'
export default {
  name: 'personalPerformance',
  data() {
    return {

    }
  },
  components: {
    performanceCard
  },
  computed: {
    ...mapGetters(['performanceList'])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .performance-card-wrap {
    margin: 0px 80px;
    display: flex;
    justify-content: space-between;
  }
</style>
